<template>
	<div class="echartsBox" ref="echartsBox"></div>
</template>

<script lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
export default {
	name: 'Echarts',
	props: {
		options: {
			required: true,
			type: Object,
			default: {},
		},
	},
	setup(props: any) {
		const echartsBox = ref(<any>null);
		const echart = ref(<any>null);
		watch(
			props.options,
			(newValue) => {
				echart.value.setOption(newValue);
			},
			{ deep: true }
		);
		onMounted(() => {
			echart.value = echarts.init(echartsBox.value, '', {
				renderer: 'canvas',
				width: undefined,
				height: undefined,
			});
			echart.value.setOption(props.options);
			window.onresize = function() {
				echart.value.resize;
			};
		});
		onUnmounted(() => {
			echart.value.clear();
			echart.value.dispose();
		});
		return { echartsBox };
	},
};
</script>

<style lang="scss" scoped>
.echartsBox {
	width: 100%;
	height: 100%;
}
</style>
